<template>
    <div class="invoice">
        <div class="tips">
            <el-icon color="#2770EE" :size="14"><InfoFilled /></el-icon>
            <span class="text">增值税专用发票抬头仅可保存1条，且审核通过后不支持修改</span>
        </div>
        <div v-if="!hasData" style="margin-top:84px">
            <el-empty description="发票为空">
                <div>
                    <el-button type="primary" @click="dialogVisible = true">添加增值税专用发票抬头</el-button>
                </div>
            </el-empty>
        </div>
        <div class="invoice-info" v-else>
            <div class="status-row">
                <span class="label">发票抬头信息</span>
                <el-tag effect="dark" v-if="form.tax_status === 0">{{form.tax_status_desc}}...</el-tag>
                <el-tag effect="plain" type="success" v-if="form.tax_status === 1">{{form.tax_status_desc}}</el-tag>
                <el-tag effect="plain" type="danger" v-if="form.tax_status === 2">{{form.tax_status_desc}}...</el-tag>
                <el-tag effect="plain" type="info" v-if="form.tax_status === 3">{{form.tax_status_desc}}...</el-tag>
                <el-button v-if="form.tax_status === 0" @click="discard">撤回审核</el-button>
                <el-button v-if="form.tax_status === 3" @click="submit">提交审核</el-button>
                <el-button v-if="form.tax_status === 2 || form.tax_status === 3" type="primary" @click="dialogVisible = true">编辑</el-button>
            </div>
            <div class="error-msg" v-if="form.tax_status === 2">
                <el-alert :title="form.audit_content" type="error" :closable="false" />
            </div>
            <div class="info-content">
                <div class="info-row">
                    <div class="label">发票抬头</div>
                    <div class="val">{{form.invoice_header}}</div>
                </div>
                <div class="info-row">
                    <div class="label">单位税号</div>
                    <div class="val">{{form.unit_tax_no}}</div>
                </div>
                <div class="info-row">
                    <div class="label">注册地址</div>
                    <div class="val">{{form.reg_address}}</div>
                </div>
                <div class="info-row">
                    <div class="label">注册电话</div>
                    <div class="val">{{form.reg_tel}}</div>
                </div>
                <div class="info-row">
                    <div class="label">开户银行</div>
                    <div class="val">{{form.open_bank}}</div>
                </div>
                <div class="info-row">
                    <div class="label">银行账号</div>
                    <div class="val">{{form.bank_account}}</div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="增值税专用发票抬头" width="480px">
            <el-form ref="formRef"
                 :model="form"
                 :rules="formRules"
                 :label-width="80">
                <el-form-item prop="invoice_header" label="发票抬头">
                    <el-input v-model="form.invoice_header" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item prop="unit_tax_no" label="单位税号">
                    <el-input v-model="form.unit_tax_no" placeholder="请输入单位税号"></el-input>
                </el-form-item>
                <el-form-item prop="reg_address" label="注册地址">
                    <el-input v-model="form.reg_address" placeholder="请输入公司注册地址"></el-input>
                </el-form-item>
                 <el-form-item prop="reg_tel" label="注册电话">
                    <el-input v-model="form.reg_tel" placeholder="请输入公司注册电话"></el-input>
                </el-form-item>
                <el-form-item prop="open_bank" label="开户银行">
                    <el-input v-model="form.open_bank" placeholder="请输入公司开户银行"></el-input>
                </el-form-item>
                <el-form-item prop="bank_account" label="银行账户">
                    <el-input v-model="form.bank_account" placeholder="请输入公司银行账户"></el-input>
                </el-form-item>
                <div>
                    <el-checkbox v-model="isAgree">
                        <template #default>
                            <div>
                                <span>同意</span>
                                <a href="https://www.baidu.com" target="_blank">《增值税专用发票抬头确认书》</a>
                            </div>
                        </template>
                    </el-checkbox>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save(formRef)">提交审核</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogSuccess" :close-on-click-modal="false" width="480px">
            <div class="success-wrap">
                <el-icon color="#67C23A" :size="63"><SuccessFilled /></el-icon>
                <div class="title">发票信息已提交</div>
                <div class="desc">将在7个工作日审核，请耐心等待</div>
                <el-button type="primary" @click="refresh" style="width:160px;height:48px;margin-top:67px" :close-on-click-modal="false" size="large">我知道了</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'

import {InfoFilled, SuccessFilled} from '@element-plus/icons-vue'

import { getMyInvoiceTitle,saveMyInvoiceTitle,discardMyInvoiceTitle } from 'services/system'

interface Invoice {
    id?: number | undefined | null,
    invoice_header: string,
    unit_tax_no:string,
    reg_address:string,
    reg_tel: string,
    open_bank: string,
    bank_account: string,
    tax_status: number | undefined | null,
    audit_at: string,
    audit_content?:string,
    create_at: string,
    account:string,
    tax_status_desc:string
}

const formRef = ref<FormInstance>()

const hasData = ref(true)

const dialogVisible = ref(false)

const isAgree = ref(false)

const form = ref<Invoice>({
    id:undefined,
    invoice_header:'',
    unit_tax_no:'',
    reg_address: '',
    reg_tel:'',
    open_bank:'',
    bank_account:'',
    tax_status:null,
    audit_content:'',
    audit_at:'',
    create_at:'',
    account:'',
    tax_status_desc:''
})

const formRules = reactive<FormRules>({
    invoice_header:[{required:true,message:'请输入公司名称'}],
    unit_tax_no:[{required:true,message:'请输入单位税号'}],
    reg_address:[{required:true,message:'请输入注册地址'}],
    reg_tel:[{required:true,message:'请输入注册电话'}],
    open_bank:[{required:true,message:'请输入开户银行'}],
    bank_account:[{required:true,message:'请输入银行账号'}],

})

const dialogSuccess = ref(false)

const getInvoiceTtile = () => {
    getMyInvoiceTitle().then(res => {
        hasData.value = res.list ? true : false
        form.value = res.list[0]
    })
}

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isAgree.value === false) {
                ElMessage.error('请同意《增值税专用发票抬头确认书》')
                return
            }

            saveMyInvoiceTitle(form.value).then(res => {
                dialogVisible.value = false
                dialogSuccess.value = true
            })
        } else {
            console.log('error submit', fields)
        }
    }) 
}

const submit = () => {
    saveMyInvoiceTitle(form.value).then(res => {
        dialogSuccess.value = true
    })
}

const refresh = () => {
    dialogSuccess.value = false
    getInvoiceTtile()
}

const discard = () => {
    if (form.value.id) {
        discardMyInvoiceTitle({
            id:form.value.id
        }).then(res => {
            ElMessage.success('撤回成功')
            getInvoiceTtile()
        })
    }
    
}

onMounted(() => {
    getInvoiceTtile()
})

</script>
<style lang="scss">
.invoice{
    .tips{
        display: flex;
        align-items: center;

        .text{
            margin-left: 9px;
            font-size: 14px;
            font-weight: 400;
            color: #606266;
        }
    }

    .error-msg{
        margin: 8px 0;
    }

    .success-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;

        .title{
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            line-height: 24px;
            margin-top: 20px;
        }

        .desc{
            font-size: 14px;
            font-weight: 400;
            color: #909399;
            line-height: 22px;
            margin-top: 4px;
        }
    }

    .invoice-info{
        width: 100%;
        border-radius: 12px;
        background-color: #fafafa;
        box-sizing: border-box;
        padding: 24px;
        margin-top: 28px;

        .status-row{
            display: flex;
            align-items: center;

            .label{
                font-size: 14px;
                font-weight: 600;
                color: #303133;
                line-height: 22px;
                margin-right: 10px;
            }

            .el-tag{
                margin-right: auto;
            }
        }

        .info-content{
            margin-top: 14px;
        }

        .info-row{
            height: 34px;
            width: 100%;
            display: flex;
            align-items: center;

            .label{
                font-size: 14px;
                font-weight: 400;
                color: #909399;
                line-height: 22px;
                margin-right: 16px;
            }

            .val{
                font-size: 14px;
                font-weight: 400;
                color: #303133;
                line-height: 22px;
            }
        }
    }
}
</style>